<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/uikit/uikit.css"/>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/vue.min.js"></script>
<script src="js/common/uikit.js"></script>

<link rel="stylesheet" href="css/main.css"/>
<script lang="javascript" src="js/utils.js"></script>
<script lang="javascript">
    doImport("org.voovan.docker.command.Service.CmdServiceCreate")
    doImport("org.voovan.docker.command.Service.CmdServiceList")
    doImport("org.voovan.docker.command.Service.CmdServiceRemove")
    doImport("org.voovan.docker.command.Service.CmdServiceUpdate")

    doImport("org.voovan.docker.command.Image.CmdImageList")
    doImport("org.voovan.docker.command.Network.CmdNetworkList")
    doImport("org.voovan.docker.command.Volume.CmdVolumeList")

    function init() {
        serviceListVue = new Vue({
            el: '#ServiceApp',
            data: {
                serviceList: null,
                networkList: null,
                volumeList: null,
                imageList: null,
                queryParams:{
                    name:"",
                    id:"",
                    status:"All"
                },
                createParams:{
                    cpuPeriod:100000,
                    name:"",
                    image:"",
                    command:"",
                    env:"",
                    mode:"replicated",
                    cpuLimit:1,
                    memoryLimit:64,
                    cpuReservation:0,
                    memoryReservation:0,
                    network:"",
                    port: {
                        hostPort: "",
                        containerPort: "",
                        protocol: "tcp",
                        ports:[],
                        add: function(){
                            var port = {};
                            port.hostPort = this.hostPort;
                            port.containerPort = this.containerPort;
                            port.protocol = this.protocol;
                            this.ports.push(port);
                        },
                        remove: function(index){
                            this.ports.remove(index)
                        }
                    },
                    volume:{
                        volumeSource:"",
                        volumeTarget:"",
                        volumes:[],
                        add: function(){
                            var volume = {};
                            volume.volumeSource = this.volumeSource;
                            volume.volumeTarget = this.volumeTarget;
                            this.volumes.push(volume);
                        },
                        remove: function(index){
                            this.volumes.remove(index)
                        }
                    },
                    replicate:1
                }
            },
            methods: {
                //查询方法
                query: function () {
                    try {
                        var cmdServiceList = new CmdServiceList();
                        cmdServiceList.connect();

                        if (this.queryParams.id != "") {
                            cmdServiceList.id([this.queryParams.id]);
                        }

                        if (this.queryParams.name != "") {
                            cmdServiceList.name([this.queryParams.name]);
                        }

                        //cmdServiceList.label("author","helyho");
                        this.serviceList = cmdServiceList.send().sortBy("id", true);
                        cmdServiceList.close();
                        cmdServiceList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },

                //移除方法
                remove: function (service) {
                    try{
                        name = service.spec.name;
                        id = service.id

                        UIkit.modal.confirm("Are you sure to remove <span class='uk-text-danger'>" + name + "</span> ?", function () {
                            try {
                                var cmdServiceRemove = new CmdServiceRemove(id);
                                cmdServiceRemove.connect();
                                cmdServiceRemove.send();
                                cmdServiceRemove.close();
                                cmdServiceRemove.release();
                                serviceListVue.query();
                            } catch (e) {
                                alertError(e)
                            }
                        });
                    } catch (e) {
                        alertError(e)
                    }
                },

                scale: function(service){

                    UIkit.modal.prompt("Replicas:", service.spec.mode.replicated.replicas, function(newvalue){
                        try {
                            var cmdServiceUpdate = new CmdServiceUpdate(service);
                            cmdServiceUpdate.connect();
                            cmdServiceUpdate.replicate(newvalue)
                            cmdServiceUpdate.send();
                            cmdServiceUpdate.close();
                            cmdServiceUpdate.release();
                            serviceListVue.query();
                        } catch (e) {
                            alertError(e)
                        }
                    });
                },

                openCreateDialog: function () {
                    try{
                        serviceListVue.getImageList();
                        serviceListVue.getNetworkList();
                        serviceListVue.getVolumeList();
                    } catch (e) {
                        alertError(e)
                    }
                    createServiceDialog = UIkit.modal("#createServiceDialog");
                    createServiceDialog.show();
                },
                getImageList: function () {
                    try{
                        var cmdImageList = new CmdImageList();
                        cmdImageList.connect();

                        this.imageList = cmdImageList.send().sortBy("Created");
                        cmdImageList.close();
                        cmdImageList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getNetworkList: function () {
                    try{
                        var cmdNetworkList = new CmdNetworkList();
                        cmdNetworkList.connect();
                        //cmdNetworkList.type("custom");
                        this.networkList = cmdNetworkList.send().sortBy("name");
                        cmdNetworkList.close();
                        cmdNetworkList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getVolumeList: function () {
                    try{
                        var cmdVolumeList = new CmdVolumeList();
                        cmdVolumeList.connect();
                        this.volumeList = cmdVolumeList.send().sortBy("name");
                        cmdVolumeList.close();
                        cmdVolumeList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                create: function () {
                    try {

                        var cmdServiceCreate = new CmdServiceCreate();
                        cmdServiceCreate.connect();

                        if(this.createParams.name!=""){
                            cmdServiceCreate.name(this.createParams.name);
                        }

                        if (this.createParams.image != "") {
                            cmdServiceCreate.image(this.createParams.image);
                        }

                        if (this.createParams.command != "") {
                            cmdServiceCreate.cmd(this.createParams.command.split(" "));
                        }

                        if (this.createParams.env != "") {
                            cmdServiceCreate.env(this.createParams.env.split(","));
                        }

                        if (this.createParams.cpuLimit != "") {
                            cmdServiceCreate.cpuLimit(this.createParams.cpuLimit);
                        }

                        if (this.createParams.memoryLimit != "") {
                            cmdServiceCreate.memoryLimit(this.createParams.memoryLimit);
                        }

                        if (this.createParams.cpuReservation != "") {
                            cmdServiceCreate.cpuReservation(this.createParams.cpuReservation);
                        }

                        if (this.createParams.memoryReservation != "") {
                            cmdServiceCreate.memoryReservation(this.createParams.memoryReservation);
                        }

                        if (this.createParams.network != "") {
                            cmdServiceCreate.network(this.createParams.network);
                        }

                        if (this.createParams.port.ports.length > 0) {
                            for(var i = 0; i<this.createParams.port.ports.length; i++) {
                                var port = this.createParams.port.ports[i];
                                cmdServiceCreate.port(port.protocol, port.containerPort, port.hostPort);
                            }
                        }
                        if (this.createParams.volume.volumes.length > 0) {
                            var volumes = new Array();
                            for(var i = 0; i<this.createParams.volume.volumes.length; i++) {
                                var volume = this.createParams.volume.volumes[i];
                                if (volume.linkName != "") {
                                    cmdServiceCreate.mount( "volume", volume.volumeSource , "/"+volume.volumeTarget, false);
                                } else {
                                    cmdServiceCreate.mount("volume", volume.volumeSource , "/"+volume.volumeSource, false);
                                }
                            }
                        }

                        if (this.createParams.replicate != "") {
                            cmdServiceCreate.replicate(this.createParams.replicate);
                        }

                        cmdServiceCreate.send();
                        cmdServiceCreate.close();
                        createServiceDialog.hide();
                        alert("Create service success.");
                        serviceListVue.query();
                    } catch (e) {
                        alertError(e);
                    }
                }
            }
        });
        var urlId = getQueryString("id");
        serviceListVue.queryParams.id = urlId==null?"" : urlId;
        if(urlId != null){
            $("#query").hide();
        }
        serviceListVue.query()
    }
</script>
<body onload="init()" class="frameBody">
<div id="ServiceApp" class="uk-grid" style="display: none" v-show="this.serviceList!=null">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3 class="uk-text-middle">Service manager</h3>
        <div id="query" class="uk-panel uk-panel-box uk-text-bold">
            <div class="uk-grid">
                <div class="uk-width-5-6 uk-form">
                    <span class="mr5">Id:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="service  id" v-model="queryParams.id">
                    <span class="mr5">Name:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="service name" v-model="queryParams.name">
                    <a class="uk-button uk-button-small" @click="query()"><i class="uk-icon-search"></i></a>
                </div>
                <div class="uk-width-1-6 uk-text-right">
                    <a class="uk-button uk-button-small uk-button-primary"
                       @click="openCreateDialog"><i class="uk-icon-plus-square"></i> </a>
                </div>
            </div>
        </div>
        <table id="serviceList" class="uk-table uk-overflow-service uk-panel-box">
            <caption>Service list</caption>
            <thead>
            <tr>
                <th class="uk-text-center">NO.</th>
                <th>ID</th>
                <th>Name</th>
                <th>Image</th>
                <th>IP</th>
                <th>Replicas</th>
                <th>Created</th>
                <th>Updated</th>
                <th class="uk-text-center">Operation</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(service,index) in serviceList">
                <td class="uk-text-center uk-text-middle uk-text-small">{{index}}</td>
                <td class="uk-text-bold uk-text-middle ">
                    <a class="uk-text-primary" :href="'task.html?service='+service.id">{{service.id|shortDockerId(12)}}</a>
                </td>
                <td class="uk-text-bold uk-text-middle uk-text-danger">
                    {{service.spec.name}}
                </td>
                <td class="uk-text-bold uk-text-middle uk-text-warning">
                    {{service.spec.taskTemplate.containerSpec.image.split("@")[0]}}
                </td>
                <td class="uk-text-middle">
                    <div v-for="virtualIP in service.endpoint.virtualIPs">
                        <code>{{virtualIP.addr}}</code>
                    </div>
                </td>
                <td class="uk-text-middle uk-text-bold uk-text-success uk-text-center">{{service.spec.mode.replicated.replicas}}</td>
                <td class="uk-text-middle">
                   {{service.createdAt|strToDate}}
                </td>
                <td class="uk-text-middle">
                    {{service.updatedAt|strToDate}}
                </td>
                <td class="uk-text-center uk-text-middle">
                    <div class="uk-button-group">
                        <input class="uk-button uk-button-small uk-button-primary" type="button" value="Scale"
                               @click="scale(service)"/>
                        <input class="uk-button uk-button-small uk-button-danger" type="button" value="Remove"
                               @click="remove(service)"/>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="createServiceDialog" class="uk-modal">
        <div class="uk-modal-dialog uk-modal-dialog-large uk-overflow-service">
            <a href="#" class="uk-modal-close uk-close uk-close-alt"></a>
            <div class="uk-modal-header"><h2 class="uk-text-success">Create a new service</h2></div>
            <div class="uk-form">
                <table class="uk-table uk-overflow-service uk-panel-box">
                    <tr>
                        <td class="dialogField">Name:</td>
                        <td><input class="uk-form-width-medium" type="text"
                                   placeholder="contianer name" v-model="createParams.name"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Image:</td>
                        <td>
                            <select class="uk-form-width-medium" v-model="createParams.image">
                                <option v-for="image in imageList"
                                        :value="image.repoTags[0]"
                                v-if="image.repoTags.length!=0">{{image.repoTags[0]}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Mode:</td>
                        <td>
                            <select class="uk-form-width-medium" v-model="createParams.mode">
                                <option value="global">global</option>
                                <option value="replicated">replicated</option>
                            </select>
                        </td>
                    </tr>
                    <tr v-if="createParams.mode=='replicated'">
                        <td class="dialogField">Replicate:</td>
                        <td><input class="uk-form-width-mini uk-text-center" type="text"
                                   placeholder="replicate count" v-model="createParams.replicate"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Command:</td>
                        <td><input class="uk-form-width-large" type="text"
                                   placeholder="command to run" v-model="createParams.command"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Env:</td>
                        <td><input class="uk-form-width-large" type="text"
                                   placeholder="like: author=dockerfly" v-model="createParams.env"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">CPU:</td>
                        <td><input type="text" class="uk-form-width-small uk-text-center"
                                   placeholder="cpu core count" v-model="createParams.cpuLimit"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Memory:</td>
                        <td><input type="text" class="uk-form-width-small uk-text-center"
                                   placeholder="memory size (Mb)" v-model="createParams.memoryLimit"/></td>
                    </tr>
                    <tr>
                        <td class="dialogField">Network:</td>
                        <td>
                            <select class="uk-form-width-medium" v-model="createParams.network">
                                <option value="">Nothing</option>
                                <option v-for="network in networkList" v-if="network.driver=='overlay'"
                                        :value="network.id">{{network.name}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Port:</td>
                        <td>
                            <div class="uk-panel  uk-width-7-10">
                                <ul class="uk-list uk-list-line ">
                                    <li v-for="(port,index) in createParams.port.ports">
                                        <div class="uk-grid">
                                            <div class="uk-text-bold uk-text- uk-width-8-10">
                                                <input class="port_input_button uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="port.hostPort"/>
                                                &nbsp;:&nbsp;
                                                <input class="port_input_button uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="port.containerPort"/>
                                                &nbsp;/&nbsp;
                                                <input class="port_input_button uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="port.protocol"/>
                                            </div>
                                            <div class="uk-width-2-10">
                                                <a href="#" class="uk-button uk-button-mini uk-button-danger" @click="createParams.port.remove(index)">
                                                    <span class="uk-icon-remove"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <input class="port_input_button uk-text-center"
                                               type="text" placeholder="host" v-model="createParams.port.hostPort"/>
                                        &nbsp;:&nbsp;
                                        <input class="port_input_button uk-text-center"
                                               type="text" placeholder="guest" v-model="createParams.port.containerPort"/>
                                        &nbsp;/&nbsp;
                                        <select v-model="createParams.port.protocol">
                                            <option value="tcp">tcp</option>
                                            <option value="udp">udp</option>
                                        </select>
                                        <a href="#" class="uk-button uk-button-primary" @click="createParams.port.add()"><i class="uk-icon-plus-square"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField">Volume:</td>
                        <td>
                            <div class="uk-panel  uk-width-7-10">
                                <ul class="uk-list uk-list-line ">
                                    <li v-for="(volume,index) in createParams.volume.volumes">
                                        <div class="uk-grid">
                                            <div class="uk-text-bold uk-text- uk-width-8-10">
                                                <input class="uk-form-width-medium uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="volume.volumeSource"/>
                                                &nbsp;:&nbsp;
                                                <input class="uk-form-width-medium uk-text-center" type="text" disabled
                                                       placeholder="path in container" :value="volume.volumeTarget"/>
                                            </div>
                                            <div class="uk-width-2-10">
                                                <a href="#" class="uk-button uk-button-mini uk-button-danger" @click="createParams.volume.remove(index)">
                                                    <span class="uk-icon-remove"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <select class="uk-form-width-medium" v-model="createParams.volume.volumeSource">
                                            <option value="">Nothing</option>
                                            <option v-for="volume in volumeList"
                                                    :value="volume.name">{{volume.name}}
                                            </option>
                                        </select>&nbsp;:&nbsp;
                                        <input class="uk-form-width-medium uk-text-center" type="text"
                                               placeholder="path in container" v-model="createParams.volume.volumeTarget"/>
                                        <a href="#" class="uk-button uk-button-primary" @click="createParams.volume.add()"><i class="uk-icon-plus-square"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="dialogField" colspan="2">
                            <a href="#" class="uk-button uk-button-primary"  @click="create()">Create</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px; margin-bottom:10px" class="uk-text-center">
            <div><img height="27" width="120" src="img/logo.png"/></div>
            <div>CopyRight <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>